<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>学生管理 - 学生管理系统</title>
    <link rel="stylesheet" href="../css/public.css">
    <script>
        function setActive() {
            var buttons = document.getElementsByTagName('button');
            for (var i = 0; i < buttons.length; i++) {
                buttons[i].addEventListener('click', function () {
                    for (var j = 0; j < buttons.length; j++) {
                        buttons[j].classList.remove('active');
                    }
                    this.classList.add('active');
                });
            }
        }
    </script>
</head>

<body onload="setActive()">
    <header>
        <h1>学生管理系统</h1>
        <nav>
            <a href="../index.html"><button>首页</button></a>
            <button class="active">学生管理</button>
            <a href="clas.html"><button>班级管理</button></a>
        </nav>
    </header>
    <main>
        <h2>学生信息表</h2>
        <!-- 搜索框 -->
        <div class="search_box">
            <input type="text" id="searchInput" placeholder="请输入学生姓名关键字进行搜索..." onkeyup="get_by_keyword(this.value)" />
        </div>
        <table id="studentTable" class="table_main">
            <thead>
                <tr>
                    <th>学生id</th>
                    <th>学生姓名</th>
                    <th>性别</th>
                    <th>班级id</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="data_info"></tbody>
        </table>
        <div class="div_in_container">
            <div class="div_input_son_container">
                <h3>添加学生</h3>
                <div id="add_student">
                    <input type="text" name="" id="add_student_name" placeholder="请输入学生姓名" />
                    <input type="text" name="" id="add_student_gender" placeholder="请输入学生性别" />
                    <input type="text" name="" id="add_student_classid" placeholder="请输入班级id" />
                </div>
                <button onclick="addStudent()">添加学生</button>
            </div>
            <div class="div_input_son_container">
                <h3>编辑学生</h3>
                <div id="edit_student">
                    <input type="text" name="" id="edit_student_id" placeholder="请输入学生id" />
                    <input type="text" name="" id="edit_student_name" placeholder="请输入新的学生姓名" />
                    <input type="text" name="" id="edit_student_gender" placeholder="请输入新的学生性别" />
                    <input type="text" name="" id="edit_student_classid" placeholder="请输入新的班级id" />
                </div>
                <button onclick="UpdataStudent()">保存</button>
            </div>
        </div>
    </main>
</body>

<script src="../js/request.js"></script>
<script>
    // 搜索
    function get_by_keyword(keyword) {
      getData(
        "http://127.0.0.1:8888/api/student/?keyword=" + keyword,
        function (error, data) {
          if (error) {
            console.error("请求出错：", error);
          } else {
            var tbody = document.getElementById("data_info");
            tbody.innerHTML = "";

        data["data"].forEach(function (value) {
              var tr = document.createElement("tr");
            //   id
              var studentid = document.createElement("td");
              studentid.innerText = value["id"];
            //   姓名
              var studentname = document.createElement("td");
              studentname.innerText = value["name"];
            //   性别
            var studentgender = document.createElement("td");   
            studentgender.innerText = value["gender"];
            // 班级id
            var classid = document.createElement("td");
            classid.innerText = value["clas_id"];
            // 操作
            var operate = document.createElement("td");
            var edit = document.createElement("span");
            edit.innerText = "编辑";
            edit.addEventListener("click", function(){
            document.getElementById("edit_student_id").value = value["id"];
            document.getElementById("edit_student_name").value = value["name"];
            document.getElementById("edit_student_gender").value = value["gender"];
            document.getElementById("edit_student_classid").value = value["clas_id"];
            })
            operate.appendChild(edit);
            var del = document.createElement("span");
            del.innerText = "删除";
            del.addEventListener("click", function () {
            deleteStudent(value["id"]);
            });
            operate.appendChild(del);
              // 挂载
            tr.appendChild(studentid);
            tr.appendChild(studentname);
            tr.appendChild(studentgender);
            tr.appendChild(classid);
            tr.appendChild(operate);
            tbody.appendChild(tr);
            });
          }
        }
      );
    }
    get_by_keyword("");

// 添加学生
    function addStudent(){
        var name = document.getElementById("add_student_name").value.trim();
        var gender = document.getElementById("add_student_gender").value;
        var classid = document.getElementById("add_student_classid").value.trim();
        if(name === "" || classid === ""){
            alert("请填写完整信息");
            return;
        }
        putData(
            "http://127.0.0.1:8888/api/student/add?name=" + encodeURIComponent(name) + 
            "&gender=" + encodeURIComponent(gender) + 
            "&clas_id=" + classid,
            null,
            function (error, data){
                if(error){
                    console.error("添加学生失败:", error);
                }else{
                    alert("添加学生成功");
                    location.reload();
                }
            }
        )
    }

    // 更新学生
    function UpdataStudent(){
        var studentid = document.getElementById("edit_student_id").value;
        var name = document.getElementById("edit_student_name").value.trim();
        var gender = document.getElementById("edit_student_gender").value;
        var classid = document.getElementById("edit_student_classid").value.trim();
        if(studentid === ""){
            alert("请填写学生id");
            return;
        }
        if(name === "" || classid === ""){
            alert("请填写完整信息");
            return;
        }
        putData(
            "http://127.0.0.1:8888/api/student/" + studentid,
            {
                "name": name,
                "gender": gender,
                "clas_id": classid
            },
            function (error, data){
                if(error){
                    console.error("更新学生失败:", error);
                }else{
                    alert("更新学生成功");
                    location.reload();
                }
            }
        )
    }

    // 删除学生
    function deleteStudent(studentid){
      if (confirm("你确定要删除id为" + studentid + "的学生吗？")) {
        deleteData(
          "http://127.0.0.1:8888/api/student/" + studentid,
          function (err, data) {
            if (err) {
              console.error(err);
            } else {
              alert("删除成功");
              location.reload();
            }
          }
        );
      } else {
        console.log("用户选择了取消");
      }
    }
</script>
</html>